/**
 * Created by xxx on 2017年11月24日.
 */
/**
 * Created by xxx on 2017/5/15.
 */
//用react封装
var currentpage = 1,totlepage = 1,i;//分页的当前页和总的页数
//表单的最高高度、当前第几页、总页数、总行数、设备投放切换、箱号
var otherData = {currentpage:1,totlepage:1,totlerows:1,pageLeft:0,pageRight:0,batchNumber:'',upBatchNumber:''};
var Page = React.createClass({
    setPage: function (e) {
        setPage($(e.target).html());
        this.props.onPageClick(1);
    },
    showPage: function () {
        showPage();
    },
    render: function () {
        {
            var items = [],
                svar = this;
            if(totlepage == 0 ){
                items.push({num:1,checked:true})
            }else if(totlepage < 6){
                for(i = 1;i <= totlepage ;i++) {
                    if (i == currentpage) {
                        items.push({num:i,checked:true})
                    } else {
                        items.push({num:i,checked:false})
                    }
                }
            }else if(currentpage >= (totlepage-2)) {//点在左边
                items.push({num:1,checked:false});
                items.push({num:'···',checked:false});
                for(i = totlepage-2;i <= totlepage ;i++){
                    if(i == currentpage){
                        items.push({num:i,checked:true})
                    }else{
                        items.push({num:i,checked:false})
                    }
                }
            }else if(currentpage <= 3){
                for(i = 1;i <= 3 ;i++) {
                    if (i == currentpage) {
                        items.push({num:i,checked:true})
                    } else {
                        items.push({num:i,checked:false})
                    }
                }
                items.push({num:'···',checked:false});
                items.push({num:totlepage,checked:false})
            }else {//点在两边
                items.push({num:1,checked:false});
                items.push({num:'···',checked:false});
                items.push({num:currentpage-1,checked:false});
                items.push({num:currentpage,checked:true});
                items.push({num:currentpage+1,checked:false});
                items.push({num:'···',checked:false});
                items.push({num:totlepage,checked:false})
            }
        }
        return (
            <div className="tableInfo-page">
                <div className="page-number">每页<span className="page-number-list" onClick={this.showPage}>{pagecount}</span>条</div>
                <div className="page-list" style={{top:pageListTop+"px"}}>
                    <ul>
                        {
                            pageList.map(function (item) {
                                return (<li onClick={svar.setPage}>{item}</li>)
                            })
                        }
                    </ul>
                </div>
                <div className="page-limit">
                    <ol className="page-limit-ol">
                        <ol className="page-limit-ol">
                            <li className="page-limit-img" name="-1" onClick={otherData.pageLeft == 0?'':svar.props.onPageClick.bind(svar,-1)} ><span className={otherData.pageLeft == 0?'page-limit-left-no':'page-limit-left-yes'}/></li>
                            {
                                items.map(function (item) {
                                    return (<li onClick={isNaN(item.num)?'':svar.props.onPageClick.bind(svar,item.num)} className={item.checked == true?'page-limit-num page-limit-checked':'page-limit-num'} name={item.num}>{item.num}</li>)
                                })
                            }
                            <li className="page-limit-img" name="-2" onClick={otherData.pageRight == 0?'':svar.props.onPageClick.bind(svar,-2)} ><span className={otherData.pageRight == 0?'page-limit-right-no':'page-limit-right-yes'}/></li>
                        </ol>
                    </ol>
                </div>
            </div>
        );
    },
});
//父组件
var Main = React.createClass({
    //组件初始状态
    getInitialState: function () {
        return {
            otherData: this.props.otherData,
            tableData: [],
            navigation: '',//导航内容
            droupNmae: '生产商',
            schoolDataAll: [],//学校
            schoolDataList: [],
            tableDetailsData: [],//详情
            tdInfo: [],
            sortStatus: '0',//排序0降序，1升序
            sortParam: '0',//按参数排序：0上报时间，1上报状态
        }
    },
    componentDidMount: function () {
        this.getAttendanceMachinePage(this.state.droupNmae,'',1);
        this.getSchooleList();//查询学校列表
        //绑定回车时间
        $(document).keypress(function(e) {
            var eCode = e.keyCode ? e.keyCode : e.which ? e.which : e.charCode;
            if (eCode == 13){
                if($("#queryInput").is(":focus")){
                    this.onPageClick(1);
                }
            }
        }.bind(this));
    },
    /**
     * 分页查询考勤机列表
     * @param droupNmae 参数类型
     * @param value 参数值
     * @param pageNumber 第几页
     */
    getAttendanceMachinePage: function (droupNmae,value,pageNumber) {
        suixun.showLoding();//显示加载中
        var url = serverUrl+'/attendanceMachine/getAttendanceMachinePage.json?pageNumber='+pageNumber+'&pageCount='+pagecount;
        if(value!=''&&droupNmae=='生产商'){
            url +='&factoryCode='+value;
        }else  if(value!=''&&droupNmae=='考勤机编号'){
            url +='&deviceCode='+value;
        }else  if(value!=''&&droupNmae=='学校名称'){
            url +='&schoolName='+value;
        }
        suixun.ajax(url,'',"get",function(data){
            suixun.hideLoding();//隐藏加载中
            if(data.code == 200){
                if(data.info.queryresult){
                    var getPageInfoTwo = suixun.getPageInfoTwo(pageNumber,data.info.totlepage);
                    otherData.pageLeft = getPageInfoTwo.pageLeft;
                    otherData.pageRight = getPageInfoTwo.pageRight;
                    currentpage = pageNumber;totlepage = getPageInfoTwo.totlepage;
                    this.setState({tableData:data.info.queryresult,otherData:otherData});
                }else{
                    suixun.alert('没有数据！',function (data) {
                        if(data){
                            otherData.pageLeft = 0;
                            otherData.pageRight = 0;
                            currentpage = 1;totlepage = 1;//初始化的时候赋值：分页的当前页和总的页数
                            this.setState({tableData:[],otherData:otherData});
                        }
                    }.bind(this));
                }
            }else{
                suixun.alert(data.msg)
            }
        }.bind(this));
    },
    /**
     * 获取所有学校
     */
    getSchooleList: function () {
        var svar = this;
        suixun.showLoding();//显示加载中
        suixun.ajax(serverUrl+'/schoolManage/querySchool.json','',"get",function(data){//index:"'+this.state.bannerMenu+'",
            suixun.hideLoding(500);//显示加载中
            if(data.code == 200){
                if(data.info){
                    svar.setState({schoolDataList:data.info,schoolDataAll:data.info});
                }else{
                    svar.setState({tableData:[]});
                }
            }else{
                suixun.alert(data.msg);
            }
        });
    },
    /**
     * 分页
     * @param num
     */
    onPageClick: function (num) {
        if(num > 0){
            currentpage = num;
        }else if(num == -1 && currentpage > 1){
            currentpage --;
        }else if(num == -2  && currentpage < totlepage){
            currentpage ++;
        }else{
            return;
        }
        if(this.state.navigation.indexOf('详情')==-1){
            this.getAttendanceMachinePage(this.state.droupNmae,$('#queryInput').val(),currentpage);
        }else{
            this.attendanceDetails(currentpage,this.state.tdInfo,this.state.sortStatus,this.state.sortParam);
        }

    },
    /**
     * 设置下拉选择框内容
     * @return {XML}
     */
    setDroup: function (name) {
        if(name != this.state.droupNmae){
            $("#queryInput").val('');
        }
        this.setState({droupNmae:name});
    },
    /**
     * 设置导航名称
     * @return {XML}
     */
    setNavigation: function (name) {
        if(name==''){
            this.getAttendanceMachinePage(this.state.droupNmae,$('#queryInput').val(),currentpage);
        }else if(name=='新增'){
            $("#deviceName").val('');//考勤机名称
            $("#deviceCode").val('');//考勤机编号
            $("#factoryCode").val('');//考勤机生成厂商
            $("#deliverySchoolName").val('');//考勤机投放学校
        }
        this.setState({navigation:name})
    },
    /**
     * 获得excel
     * @return {XML}
     */
    getExcel: function () {
        var url = serverUrl+'/attendanceMachine/reportAttendanceMachine.json?';
        var value = $("#queryInput").val();
        var droupNmae = this.state.droupNmae;
        if(value!=''&&droupNmae=='生产商'){
            url +='factoryCode='+value;
        }else  if(value!=''&&droupNmae=='考勤机编号'){
            url +='deviceCode='+value;
        }else  if(value!=''&&droupNmae=='学校名称'){
            url +='schoolName='+value;
        }
        window.location.href = url;
    },
    /**
     * 保存或编辑考勤机
     * @return {XML}
     */
    setAttendaance: function () {
        var deviceName = $("#deviceName").val();//考勤机名称
        var deviceCode = $("#deviceCode").val();//考勤机编号
        var factoryCode = $("#factoryCode").val();//考勤机生成厂商
        var deliverySchoolName = $("#deliverySchoolName").val();//考勤机投放学校
        if(deviceName==''){
            suixun.alert('考勤机名称不能为空！');
            return;
        }
        if(deviceCode==''){
            suixun.alert('考勤机编号不能为空！');
            return;
        }
        if(factoryCode==''){
            suixun.alert('考勤机生成厂商不能为空！');
            return;
        }
        if(deliverySchoolName==''){
            suixun.alert('考勤机投放学校名称不能为空！');
            return;
        }

        var param = new FormData();
        param.append("schoolName",deliverySchoolName);
        param.append("factoryCode",factoryCode);
        param.append("name",deviceName);
        param.append("deviceCode",deviceCode);
        suixun.showLoding();//显示加载中
        var url = serverUrl+'/attendanceMachine/addAttendanceMachine.json';
        if(this.state.navigation=='编辑'){
            param.append("attendanceMachineId",this.state.tdInfo.id);
            param.append("status",$("#deviceStatus").val());
            url = serverUrl+'/attendanceMachine/updateAttendanceMachine.json';
        }
        suixun.ajax(url,param,"post",function(data){
            suixun.hideLoding();//隐藏加载中
            if(data.code == 200){
                suixun.alert(this.state.navigation+'成功！',function (data) {
                    if(data){
                        this.setState({navigation:''});
                        this.getAttendanceMachinePage(this.state.droupNmae,$('#queryInput').val(),currentpage);
                    }
                }.bind(this));
            }else{
                suixun.alert(data.msg);
            }
        }.bind(this));
    },
    /**
     * 点击编辑
     * @param name 导航名称
     * @param data 点击行的数据
     * @return {XML}
     */
    clickEdit: function (name,data) {
        this.setState({navigation:name,tdInfo:data});
        $("#deviceName").val(data.name);//考勤机名称
        $("#deviceCode").val(data.deviceCode);//考勤机编号
        $("#factoryCode").val(data.factoryCode);//考勤机生成厂商
        $("#deliverySchoolName").val(data.schoolName);//考勤机投放学校
        $("#deviceStatus").find("option[value="+data.status+"]").attr("selected",true);//考勤机状态
    },
    /**
     * 详情-按时间排序、按状态排序
     */
    setSort: function (sortParam,sortStatus) {
        this.setState({sortStatus:sortStatus,sortParam:sortParam});
        this.attendanceDetails(currentpage,this.state.tdInfo,sortStatus,sortParam);
    },
    /**
     * 点击搜索输入框
     * @return {XML}
     */
    onClickQueryInput: function (e) {
        if(this.state.droupNmae == "学校名称" || e.target.id=='deliverySchoolName'){
            this.schoolArray($(e.target).val(),$(e.target).attr("data-list"));
        }
    },
    /**
     * 改变搜索输入框的值
     * @return {XML}
     */
    onChangQueryInput: function (e) {
        if(this.state.droupNmae == "学校名称"|| e.target.id=='deliverySchoolName'){
            var val = $(e.target).val();
            if(val != ""){
                this.schoolArray(val,$(e.target).attr("data-list"));
            }else{
                $("."+$(e.target).attr("data-list")+"").hide();
            }
        }
    },
    /**
     * 排序
     * @param val
     * @param cls
     */
    schoolArray: function (val,cls) {
        var schoolDataList = [];
        for(var i = 0;i < this.state.schoolDataAll.length;i++){
            if((this.state.schoolDataAll[i].schoolname).indexOf(val) >= 0){
                schoolDataList.push({schoolname:this.state.schoolDataAll[i].schoolname});
            }
        }
        if(schoolDataList.length == 0){
            $("."+cls+"").hide();
        }else{
            $("."+cls+"").show();
            this.setState({schoolDataList:schoolDataList});
        }
    },
    /**
     *点击学校
     */
    onClickBar: function (schoolname) {
        if(this.state.navigation=='') {
            $("#queryInput").val(schoolname);
            this.getAttendanceMachinePage("学校名称", schoolname, 1);
        }
    },
    /**
     * 设备详情
     * @param info
     */
    attendanceDetails: function (pageNumber,info,sortStatus,sortParam) {
        this.setNavigation(info.name+'详情');
        suixun.showLoding();//显示加载中
        var url = serverUrl+'/attendanceMachine/getLogAttendanceMachinePage.json?pageNumber='+pageNumber+'&pageCount='+pagecount+'&attendanceMachineId='+info.id+'&sortStatus='+sortStatus+'&sortParam='+sortParam;
        suixun.ajax(url,'',"get",function(data){
            suixun.hideLoding();//隐藏加载中
            if(data.code == 200){
                if(data.info.queryresult){
                    var getPageInfoTwo = suixun.getPageInfoTwo(pageNumber,data.info.totlepage);
                    otherData.pageLeft = getPageInfoTwo.pageLeft;
                    otherData.pageRight = getPageInfoTwo.pageRight;
                    currentpage = pageNumber;totlepage = getPageInfoTwo.totlepage;
                    this.setState({tableDetailsData:data.info.queryresult,otherData:otherData,tdInfo:info,sortStatus:sortStatus,sortParam:sortParam});
                }else{
                    suixun.alert('没有数据！',function (data) {
                        if(data){
                            otherData.pageLeft = 0;
                            otherData.pageRight = 0;
                            currentpage = 1;totlepage = 1;//初始化的时候赋值：分页的当前页和总的页数
                            this.setState({tableDetailsData:[],otherData:otherData,tdInfo:info,sortStatus:sortStatus,sortParam:sortParam});
                        }
                    }.bind(this));
                }
            }else{
                suixun.alert(data.msg,function (data) {
                    if(data){
                        otherData.pageLeft = 0;
                        otherData.pageRight = 0;
                        currentpage = 1;totlepage = 1;//初始化的时候赋值：分页的当前页和总的页数
                        this.setState({tableDetailsData:[],otherData:otherData,tdInfo:info,sortStatus:sortStatus,sortParam:sortParam});
                    }
                });
            }
        }.bind(this));
    },
    render: function () {
        {
            var svar = this;
            var Tabels = '';
            if(this.state.navigation.indexOf('详情')==-1){
                Tabels = this.state.tableData.map(function (data,index) {
                    return (
                        <tr>
                            <td style={{width: '5%'}}>{index+1}</td>
                            <td style={{width: '10%'}}>{data.name==''?'---':data.name}</td>
                            <td style={{width: '10%'}}>{data.deviceCode}</td>
                            <td style={{width: '15%'}}>{data.factoryCode}</td>
                            <td style={{width: '15%'}}>{data.schoolName}</td>
                            <td style={{width: '10%'}}>{data.status?'启用':'停用'}</td>
                            <td style={{width: '10%'}}>{suixun.getNowFormatDate('yyyy-MM-dd HH:MM:SS',new Date(data.createTime))}</td>
                            <td style={{width: '10%'}}>{data.lastReportStatus=='01'?'正常':data.lastReportStatus=='02'?'故障':'其他原因'}</td>
                            <td style={{width: '15%'}}>
                                <div onClick={this.clickEdit.bind(this,'编辑',data)} className="trButton trLeft">编辑</div>
                                <div onClick={this.attendanceDetails.bind(this,1,data,0,0)} className="trButton trLeft table-select">详情</div>
                            </td>
                        </tr>
                    )
                }.bind(this));
            }else{
                Tabels = this.state.tableDetailsData.map(function (data,index) {
                    return (
                        <tr>
                            <td style={{width: '20%'}}>{index+1}</td>
                            <td style={{width: '40%'}}>{suixun.getNowFormatDate('yyyy-MM-dd HH:MM:SS',new Date(data.reportTime))}</td>
                            <td style={{width: '40%'}}>{data.reportStatus=='01'?'正常':data.reportStatus=='02'?'故障':'其他原因'}</td>
                        </tr>
                    )
                }.bind(this));
            }

            var queryDateLists = this.state.schoolDataList.map(function (data) {
                return (
                    <span className="schoolList-value" onClick={this.onClickBar.bind(this,data.schoolname)}>{data.schoolname}</span>
                )
            }.bind(this));
        }
        return (
            <div className="outside " >
                <div className="school tableManage-body">
                    <div className="header-menu">
                        <ul>
                            <li><a href="../schoolManage/querySchoolList.html">学校</a></li>
                            <li><a href="../deviceInitManage/queryDeviceInitList.html">设备管理</a></li>
                            <li><a href="../simInfoManage/querySimInfoList.html">SIM卡管理</a></li>
                            <li style={{display:"none"}}><a href="../packageManage/queryPackageList.html">设备套餐</a></li>
                            <li style={{display:"none"}}><a href="../devicePriceManage/queryDevicePriceList.html">设备零售价</a></li>
                            <li><a href="../deviceonReserve/queryonReserveList.html">区域储备量</a></li>
                            <li><a href="../attendance/attendanceMange.html" className="select">考勤机管理</a></li>
                        </ul>
                    </div>
                    <header >
                        <div className="header-left">
                            <div style={this.state.navigation!=''?{display:'none'}:{display:'block'}} className='navigation'>考勤机列表</div>
                            <div style={this.state.navigation==''?{display:'none'}:{display:'block'}} className='navigation selsect' onClick={this.setNavigation.bind(this,'')}>
                                <a href="javascript:void(0);">考勤机列表</a><span>>{this.state.navigation}</span>
                            </div>
                        </div>
                        <div className="header-right" style={this.state.navigation!=''?{display:'none'}:{display:'block'}}>
                            <div className="header-right-select droup-select droup-type" >
                                <div className="school-or-table school-or-parent">{this.state.droupNmae}</div>
                                <span className="lower-right-corner"/>
                                <div className="drop-down left-drop-down" >
                                    <span className="select-value school-name" onClick={this.setDroup.bind(this,'生产商')}>生产商</span>
                                    <span className="select-value school-name" onClick={this.setDroup.bind(this,'考勤机编号')}>考勤机编号</span>
                                    <span className="select-value student-name" onClick={this.setDroup.bind(this,'学校名称')}>学校名称</span>
                                </div>
                            </div>
                            <div className="header-query retrieval">
                                <div className="header-query-input">
                                    <input className="query-value enterEvent" type="text" id="queryInput" data-list="queryDateList" onChange={this.onChangQueryInput} onClick={this.onClickQueryInput}   maxLength="200" placeholder={'请输入'+this.state.droupNmae+'查询'}/>
                                </div>
                                <div className="header-query-img" onClick={this.onPageClick.bind(this,1)}/>
                                <div className="schoolList queryDateList" data-inputId="queryInput">
                                    {queryDateLists}
                                </div>
                            </div>

                            <div className="header-right-botton" onClick={this.getExcel.bind(this)}>导出Excel</div>
                            <div className="header-right-botton" onClick={this.setNavigation.bind(this,'新增')}>新增</div>
                        </div>
                    </header>
                    <div className="parentsInfo tableInfo" style={this.state.navigation=='新增'?{display:'none'}:this.state.navigation=='编辑'?{display:'none'}:{display:'block'}}>
                        <div className="parentsInfo-data tableInfo-data">
                            <div className="parentsInfo-data-table tableInfo-data-table" >
                                <table className="head-body head-body">
                                    {
                                        this.state.navigation=='' ?
                                            <thead>
                                                <th style={{width: '5%'}}>序号</th>
                                                <th style={{width: '10%'}}>名称</th>
                                                <th style={{width: '10%'}}>编号</th>
                                                <th style={{width: '15%'}}>生产厂商</th>
                                                <th style={{width: '15%'}}>投放学校</th>
                                                <th style={{width: '10%'}}>投放状态</th>
                                                <th style={{width: '10%'}}>创建时间</th>
                                                <th style={{width: '10%'}}>当前状态</th>
                                                <th style={{width: '15%'}}>操作</th>
                                            </thead>
                                            :
                                            <thead>
                                                <th style={{width: '20%'}}>序号</th>
                                                <th style={{width: '40%'}}>
                                                    上报时间
                                                    <span className={this.state.sortParam==0?this.state.sortStatus=="1"?"triangle-up select":"triangle-up ":'triangle-up '} onClick={this.setSort.bind(this,0,1)}/>
                                                    <span className={this.state.sortParam==0?this.state.sortStatus=="0"?"triangle-bottom select":"triangle-bottom ":'triangle-bottom '} onClick={this.setSort.bind(this,0,0)}/>
                                                </th>
                                                <th style={{width: '40%'}}>
                                                    上报状态
                                                    <span className={this.state.sortParam==1?this.state.sortStatus=="1"?"triangle-up select":"triangle-up ":'triangle-up '} onClick={this.setSort.bind(this,1,1)}/>
                                                    <span className={this.state.sortParam==1?this.state.sortStatus=="0"?"triangle-bottom select":"triangle-bottom ":'triangle-bottom '} onClick={this.setSort.bind(this,1,0)}/>
                                                </th>
                                            </thead>
                                    }
                                    <tbody>
                                    {Tabels==""?'':Tabels}
                                    </tbody>
                                </table>
                                {Tabels==""?<div className="tableNoData">{tableNoDataCount}</div>:''}
                            </div>
                        </div>
                        <Page otherData={this.state.otherData} onPageClick={this.onPageClick} />
                    </div>
                    <div className="body-updateAttendance" style={this.state.navigation=='新增'?{display:'block'}:this.state.navigation=='编辑'?{display:'block'}:{display:'none'}}>
                        <div className="body-content">
                            <div className="body-content-title">名&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;称：</div>
                            <div className="body-content-text">
                                <div className="content-border">
                                    <input type="text" id="deviceName" className="input-content" placeholder="请填写考勤机名称" maxLength="200"/>
                                </div>
                            </div>
                        </div>
                        <div className="body-content">
                            <div className="body-content-title">编&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;号：</div>
                            <div className="body-content-text">
                                <div className="content-border">
                                    <input type="text" id="deviceCode" className="input-content" placeholder="请填写考勤机编号" maxLength="200"/>
                                </div>
                            </div>
                        </div>
                        <div className="body-content">
                            <div className="body-content-title">生产厂商：</div>
                            <div className="body-content-text">
                                <div className="content-border">
                                    <input type="text" id="factoryCode" className="input-content" placeholder="请填写考勤机生产厂商" maxLength="200"/>
                                </div>
                            </div>
                        </div>
                        <div className="body-content">
                            <div className="body-content-title">投放学校：</div>
                            <div className="body-content-text">
                                <div className="content-border">
                                    <input type="text" id="deliverySchoolName" className="input-content" data-list="bodyDateList" onChange={this.onChangQueryInput} onClick={this.onClickQueryInput}    placeholder="请填写考勤机投放学校" maxLength="200"/>
                                </div>
                                <div className="schoolList bodyDateList drop-down-list" data-inputId="deliverySchoolName">
                                    {queryDateLists}
                                </div>
                            </div>
                        </div>
                        <div className="body-content" style={this.state.navigation=='编辑'?{display:'block'}:{display:'none'}}>
                            <div className="body-content-title">使用状态：</div>
                            <div className="body-content-text">
                                <div className="content-select-border">
                                    <select className="export-factory msgType " id="deviceStatus">
                                        <option value="true" >启用</option>
                                        <option value="false" >停用</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <span className="body-svae" onClick={this.setAttendaance.bind(this)}>保存</span>
                    </div>
                    <footer id="copyright">
                        <span><img src="../img/icon/copyright.png"/>{copyright}</span>
                    </footer>
                </div>
            </div>
        );
    }
});
ReactDOM.render(
    <Main />,
    document.getElementById('tableManage')
);
/**
 * 点击下拉框——下拉框依赖
 */
$(".droup-type").click(function () {
    var dropDown = $('.left-drop-down');
    if(dropDown.is(":hidden")){
        dropDown.slideDown();
    }else{
        dropDown.slideUp();
    }
});
/**
 * 搜索框下拉列表——下拉框依赖
 */
$("*").bind("click",function(e){
    var target = $(e.target);
    if(target.closest(".schoolList-value").length == 1){
        $("#"+$(target.parent()).attr("data-inputId")+"").val(target.html());
        $(".schoolList").hide();
    }else{
        $(".schoolList").hide();
    }
});